<template>
  <div>
      <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
      <el-breadcrumb-item>晚归总列表</el-breadcrumb-item>
    </el-breadcrumb>
<el-card>
      <!--Tab-->
      <el-tabs v-model="activeName"
               @tab-click="changeArea"
               type="card">
        <el-tab-pane label="桃园"
                     name="桃园">
          <el-tabs v-model="towerIds"
                  @tab-click="getTowerCblList"
                   ref="tabsRef">
            <el-tab-pane :label="item.towerName"
                         ref="tabPaneRef"
                         v-for="item in taoyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--学生列表区域-->
             <el-table :data="tableData">
        <el-table-column prop="studentNum"
                         label="学号"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         width="180">
        </el-table-column>
        <el-table-column prop="BCLtime"
                         label="晚归时间">
        </el-table-column>
        <el-table-column prop="cause"
                         label="晚归原因">
        </el-table-column>
        <el-table-column prop="tower"
                         label="楼宇">
        </el-table-column>
        <el-table-column prop="dorm"
                         label="宿舍号">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
            </el-tab-pane>
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="dataList.pagenum"
                           :page-sizes="[1, 3, 5, 7]"
                           :page-size="dataList.pagesize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="兰园"
                  @tab-click="getTowerCblList"
                     name="兰园">
          <el-tabs v-model="towerIds">
            <el-tab-pane :label="item.towerName"
                         v-for="item in lanyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--学生列表区域-->
             <el-table :data="tableData">
        <el-table-column prop="studentNum"
                         label="学号"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         width="180">
        </el-table-column>
        <el-table-column prop="BCLtime"
                         label="晚归时间">
        </el-table-column>
        <el-table-column prop="cause"
                         label="晚归原因">
        </el-table-column>
        <el-table-column prop="tower"
                         label="楼宇">
        </el-table-column>
        <el-table-column prop="dorm"
                         label="宿舍号">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="dataList.pagenum"
                         :page-sizes="[1, 3, 5, 7]"
                         :page-size="dataList.pagesize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="荔园"
                  @tab-click="getTowerCblList"
                     name="荔园">
          <el-tabs v-model="towerIds">
            <el-tab-pane :label="item.towerName"
                         v-for="item in liyuan"
                         :key="item.towerId"
                         :name="item.towerName">
              <!--学生列表区域-->
             <el-table :data="tableData">
        <el-table-column prop="studentNum"
                         label="学号"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         width="180">
        </el-table-column>
        <el-table-column prop="BCLtime"
                         label="晚归时间">
        </el-table-column>
        <el-table-column prop="cause"
                         label="晚归原因">
        </el-table-column>
        <el-table-column prop="tower"
                         label="楼宇">
        </el-table-column>
        <el-table-column prop="dorm"
                         label="宿舍号">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="dataList.pagenum"
                         :page-sizes="[1, 3, 5, 7]"
                         :page-size="dataList.pagesize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { allTowerMixin } from 'commonjs/allTowerMixin.js'
import { formDate } from 'commonjs/formatDate.js'

export default {
  name: 'CBLall',
  props: [''],
  data () {
    return {
      tableData: []
    }
  },

  components: {},

  computed: {},

  created () {
    this.getBCLdata(this.towerIds)
  },

  mounted () {},

  methods: {
    // 获取晚归数据
    async getBCLdata (tower) {
      const { data: res } = await this.$axios.get('/tower/findCBlate', {
        params: {
          tower: tower,
          pagenum: this.dataList.pagenum,
          pagesize: this.dataList.pagesize
        }
      })
      console.log(res)
      if (res.meta.code === 200) {
        res.studentlist.map(valid => {
          valid.BCLtime = formDate(valid.BCLtime)
        })
        this.tableData = res.studentlist
        this.total = res.total
      }
    },
    handleSizeChange (size) {
      this.dataList.pagesize = size
      this.getBCLdata(this.towerIds)
    },
    handleCurrentChange (currentPage) {
      // console.log(`当前页: ${currentPage}`)
      this.dataList.pagenum = currentPage
      // 这里也需要重新请求一下数据
      this.getBCLdata(this.towerIds)
    },
    handleDelete (id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.post('/tower/delCBL', {
          id
        })
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getBCLdata()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 切换桃园、兰园、荔园
    changeArea (tab) {
      // console.log(tab)
      this.activeName = tab.label
      this.towerIds = this.activeName + '1'
      this.getBCLdata(this.towerIds)
    },
    // 获取选中楼宇维修费用信息
    getTowerCblList (tab) {
      this.towerIds = tab.name
      this.getBCLdata(this.towerIds)
    }
  },

  mixins: [allTowerMixin]

}

</script>
<style lang='' scoped>

</style>
